<template>
  <div>
    <el-dialog title="分配线索" :visible.sync="open">
      <el-tag>
        你选择了{{ids.length}}个{{title}}
      </el-tag>
      <el-form :model="form" ref="form" :rules="rules" label-width="80px">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="部门" prop="deptId">
              <treeselect v-model="form.deptId"
                          :options="deptOptions"
                          :show-count="true"
                          placeholder="请选择部门"
                          :disable-branch-nodes="true"
                          @input="changeDept"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户" prop="userId">
              <el-select v-model="form.userId" placeholder="请选择用户">
                <el-option v-for="item in deptUserOptions"
                           :label="item.nickName"
                           :value="item.userId"
                           :key="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {treeselect} from '@/api/system/dept';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    listUser,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  import {addRecord} from "@/api/crm/record";
  import {getToken} from "@/utils/auth";

  export default {
    name: "assign",
    components: {Treeselect},
    props: {
      type: {type: String},
      title: {type: String},
    },
    data() {
      return {
        // id: null,
        ids: [],
        open: false,
        form: {
          userId: null,
          deptId: null,
        },
        deptOptions: [],
        deptUserOptions: [],
        rules: {
          deptId: [{required: true, message: '部门不能为空！', trigger: 'blue'}],
          userId: [{required: true, message: '用户不能为空！', trigger: 'blue'}],
        },
      }
    },
    created() {
      this.getDeptTree();
    },
    methods: {
      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 部门，用户下拉框
      changeDept(val) {
        this.form.userId = null;
        if (val) {
          listUser({deptId: val}).then(resp => {
            this.deptUserOptions = resp.rows;
          });
        } else {
          this.deptUserOptions = [];
        }
      },
      // 表单确定
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.open = false;
            // this.form.id = this.id;
            addRecord(this.idsToList()).then(resp => {
              if (resp.code == 200) {
                this.$message.success('分配成功！');
                this.open = false;
                this.$emit('ok');
              }
            });
          }
        });
      },
      resetForm() {
        this.form = {
          deptId: null,
          userId: null,
        }
      },
      //  ids数组
      idsToList() {
        let list = [];
        let userName = this.deptUserOptions.find(item => item.userId == this.form.userId).userName;
        for (let id of this.ids) {
          let item = {
            assignId: id,
            type: this.type, // 枚举对象的名字
            userId: this.form.userId,
            userName: userName,
            deptId: this.form.deptId,
          };
          list.push(item);
        }
        return list;
      }
    },
  }
</script>

<style scoped>

</style>
